<template>
  <el-card shadow="never">
    <div slot="header" class="clearfix" style="line-height: 28px">
      <span>{{ isDept ? '部门' : '区域' }} 负责人设置</span>
      <el-button class="fr" type="primary" size="mini" @click="handleSure">确定</el-button>
    </div>
    <div class="table-page-search-wrapper mb20">
      <el-form :form="form" :inline="true">
        <el-form-item label="盘点人">
          <user-select
            ref="userSelect"
            :selectValue="selectValue"
            v-decorator="['user', {rules: [{required: true, message: '请选择'}], validateTrigger: 'change' }]"
            @select="userSelectChange"
          />
        </el-form-item>
      </el-form>
    </div>
    <area-tree
      v-if="isDept"
      ref="setTree"
      @treeCheck="handleTreeCheck"
      :checkable="true"
      :treeData="deptTreeData"
    />
    <area-tree
      v-if="!isDept"
      ref="setTree"
      @treeCheck="handleTreeCheck"
      :checkable="true"
      :treeData="treeAreaData"
    />
  </el-card>
</template>

<script>
import AreaTree from '@/components/XTree'
import UserSelect from '../components/UserSelect'
import { queryName } from '@/api/assetsNew'
import { getAreaTree } from '@/api/assets'
import { openNotification } from '@/utils/util'
import { getDeptTree } from '@/api/department'

export default {
  components: {
    UserSelect,
    AreaTree
  },
  data() {
    return {
      form: {},
      treeData: [],
      checkedArr: [],
      selectValue: null,
      isDept: false,
      treeAreaData: [],
      deptTreeData: []
    }
  },
  mounted() {
    this.getAreaTree()
    this.getDeptTree()
  },
  methods: {
    setType(num) {
      this.isDept = num === 1 ? false : true
    },
    getDeptTree() {
      getDeptTree().then(res => {
        this.deptTreeData = res.data
      })
    },
    getAreaTree() {
      getAreaTree().then(res => {
        console.log('getAreaTree res', res)
        // const arr = res.data
        this.treeAreaData = res.data
      })
    },
    async handleSure() {
      if (this.selectValue) {
        let param = []
        if (this.checkedArr.length > 0) {
          // const newArr = this.checkedArr.filter(v => v !== 'all')
          const selectedId = this.checkedArr.join(',')
          console.log('参数', this.selectValue, selectedId)
          const id = this.isDept ? 'deptId' : 'areaId'
          const res = await queryName({ userId: this.selectValue, [id]: selectedId })
          if (res.state === '000000') {
            this.selectValue = null
            this.$refs.setTree.getKeys([])
            this.$emit('setArr', res.data)
          }
        } else {
          this.$message.error('请选择一个部门')
        }
      } else {
        this.$message.error('请选择一个用户')
      }
    },
    userSelectChange(value) {
      // console.log('value', value)
      this.selectValue = value.id
    },
    handleTreeCheck(arr) {
      this.checkedArr = arr
    },
    // 表格编辑回显树
    handleEdit(record) {
      const id = record.areaId ? 'areaId' : 'deptId'
      const arr = record[id].split(',')
      this.checkedArr = arr
      this.$refs.setTree.getKeys(arr)
      this.selectValue = record.userId
    }
  }
}
</script>
